<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">课程表</view>
				<view class="right">

				</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="centent1">
			<image :src="courseImg" mode=""></image>
		</view>
		<view class="centent2">
			<view>
				<text>上课时间</text>
				<text class="centent2-1">{{startTime}}</text>
				<view>
					<text></text>
					<text>周一下午16:00-17:00</text>
				</view>
			</view>

		</view>
		<view class="centent3">
			<text>独立口语万能理由模板汇总</text>
			<text>这是一段课程的简介这是一段课程的简介这是一段课程的简介这是一段课程的简介</text>
			<view class="centent3-1">
				-----------------------------------------------
			</view>
			<view class="centent3-2">
				<image src="" mode=""></image>
				<view>
					<text>周大花</text>
					<text>【高新区外国语实验小学】中学英语组长</text>
				</view>
			</view>
			<view class="centent3-3">
				<button>我要报名</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime:'',
				courseImg:'',
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
			}
		},
		methods: {
			goBack() {
				// 此处是写返回页面的方法、

				uni.navigateBack({
					delta: 1 //返回只上一级页面
				});
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.startTime=item.startDate.substring(0,10);
			this.courseImg=item.courseLogo
			console.log(item,'当前课程的详情')
		}
	}
</script>

<style lang="less">
	* {
		padding: 0;
		margin: 0;
	}

	body {
		background: #e8e8ee;
		padding: 28rpx;

	}

	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}

	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}

	.title {
		flex: 1;
		height: 100%;

	}

	.right {
		flex: 1;
	}




	.centent1 {
		image {
			width: 692rpx;
			height: 366rpx;
			border-radius: 14rpx;
			background-size: cover;
		}
	}

	.centent2 {
		width: 692rpx;
		height: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 28rpx;

		>view {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			padding-top: 30rpx;

			.centent2-1 {
				font-size: 50rpx;
			}

			>view {
				display: flex;
				flex-direction: column;
				font-size: 20rpx;
				color: #848484;

				>text {
					margin-bottom: 12rpx;
				}
			}
		}
	}

	.centent3 {
		width: 670rpx;
		height: 422rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 26rpx;
		display: flex;
		padding-left: 22rpx;
		flex-direction: column;

		text:first-child {
			font-size: 34rpx;
			margin-top: 30rpx;
		}

		text:nth-child(2) {
			margin-top: 26rpx;
			font-size: 26rpx;
			color: #333333;
		}
	}

	.centent3-1 {
		margin-left: 4rpx;
		margin-top: 40rpx;
		color: #e2e2e2;

		image {
			width: 106rpx;
			height: 106rpx;
		}
	}

	.centent3-2 {
		margin-top: 34rpx;
		display: flex;
		flex-direction: row;

		// align-items: center;
		image {
			width: 106rpx;
			height: 106rpx;
			background: #4CD964;
			border-radius: 90rpx;
		}

		view {
			margin-left: 28rpx;
			display: flex;
			flex-direction: column;

			text:first-child {
				margin-top: 0;
				font-size: 40rpx;
			}

			text:last-child {
				margin-top: 12rpx;
				margin-left: 0;
				font-size: 26rpx;
				color: rgb(51, 51, 51);
			}
		}
	}

	.centent3-3 {
		margin-top: 110rpx;
		margin-bottom: 90rpx;

		button {
			width: 230rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: #2db3fe;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>
